<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: springgreen;
        }
    </style>
</head>
<body>
    <div class="a">我是一个div</div>
    <div class="b">我是一个div</div>
    <script src="./js/jquery.js"></script>
    <script>
        /* 自定义的动画 */
        // $("div").animate({
        //     width:"1000px",
        //     "height":"1000px",
        //     color:'#fff',
        //     "font-size":"99px"
        // })


        /* 
            自定义动画的参数
                参数一  动画的对象
                参数二  动画的过渡时间
                参数三  动画的效果
                参数四  动画的结束需要执行的函数
        */
    //    $(".a").animate({
    //         width:"1000px",
    //         "height":"1000px",
    //         color:'#fff',
    //         "font-size":"99px"
    //     },1000,"linear",function(){
    //         console.log("执行完毕之后运行这个函数");
    //     });


    //    $(".b").animate({
    //         width:"1000px",
    //         "height":"1000px",
    //         color:'#fff',
    //         "font-size":"99px"
    //     },1000,"swing");





    </script>
</body>
</html>